<template>
    <van-pull-refresh
    v-model:isLoading="isLoading"
    @refresh="$emit('refresh')"
    class="content"
    :disabled="disabled">
        <van-list
        v-model:loading="isLoad"
        v-model:error="loadError"
        :offset="offset"
        :finished="finished"
        :immediate-check="immediateCheck"
        finished-text="没有更多了"
        @load="$emit('load')"
        >
            <template class="item" v-for="(item, index) in list">
                <slot :item="item" :index="index"></slot>
            </template>
            <slot name="content"></slot>
        </van-list>
    </van-pull-refresh>
</template>

<script>
import { ref, defineProps, defineComponent, watchEffect } from 'vue'
import { PullRefresh, List } from 'vant'

export default defineComponent({
    props: {
        isLoading: { // 下拉刷新 - 是否处于加载中状态
            type: Boolean,
            default: false
        },
        disabled: { // 下拉刷新 - 是否禁用
            type: Boolean,
            default: false
        },
        immediateCheck: { // 上拉加载 - 是否在初始化时立即执行滚动位置检查
            type: Boolean,
            default: true
        },
        loading: { // 上拉加载 - 是否处于加载状态，加载过程中不触发 load 事件
           type: Boolean,
           default: false
        },
        offset: { // 上拉加载 - 触发的距离
            type: [String, Number],
            default: 50
        },
        finished: { // 上拉加载 - 是否已加载完成，加载完成后不再触发 load 事件
            type: Boolean,
            default: false
        },
        error: { // 上拉加载 - 是否加载失败，加载失败后点击错误提示可以重新触发 load 事件
            type: Boolean,
            default: false
        },
        list: { // 数据源
            type: [Array, Number],
            default: []
        }
    },
    components: {
        [PullRefresh.name]: PullRefresh,
        [List.name]: List
    },
    setup (props, context) {
        const isLoad = ref(false)
        const loadError = ref(false)
        watchEffect(() => {
            isLoad.value = props.loading
        })
        return {
            isLoad,
            loadError
        }
    }
})

</script>

<style lang="scss" scoped>
.content {
    overflow: auto;
    flex: 1;
}    
</style>